<template>
  <div>
    <!--     搜索条件-->
    <SearchForm @search="getTableData" @reset="resetData">
      <el-col :span="8" :xs="24" v-show="$permiss[450]">
        <el-form-item :label="$t('所属租户')" prop="type">
          <!--1业务拉黑，2导入，3灰转黑-->
          <el-select
              style="width: 100%"
              v-model="page.adminUserId"
              clearable
          >
            <el-option
                v-for="tenant in tenantList"
                :key="tenant.adminUserId"
                :value="tenant.adminUserId"
                :label="tenant.adminName"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('用户姓名')" prop="name">
          <el-input v-model="page.name"/>
        </el-form-item>
      </el-col>

      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('手机号码')" prop="phone">
          <el-input v-model="page.phone"/>
        </el-form-item>
      </el-col>

      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('身份证号码')" label-width="100px" prop="card">
          <el-input v-model="page.card"/>
        </el-form-item>
      </el-col>

      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('数据来源')" prop="type">
          <!--1业务拉黑，2导入，3灰转黑-->
          <el-select style="width: 100%" v-model="page.type" clearable>
            <el-option :label="$t('业务拉黑')" :value="1"></el-option>
            <el-option :label="$t('导入')" :value="2"></el-option>
            <el-option :label="$t('灰转黑')" :value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <!-- 条件第二行 -->
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('加入时间')" prop="timeValue">
          <el-date-picker
              v-model="page.timeValue"
              style="width: 100%"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="~"
              unlink-panels
              :start-placeholder="$t('开始日期')"
              :end-placeholder="$t('结束日期')"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>

    <el-card shadow="never" style="margin-top: 10px">
      <div class="upButtonBg" v-show="$permiss[449]">
        <el-upload
            style="margin-right: 10px"
            action="#"
            ref="upload"
            :show-file-list="false"
            accept=".xls,.xlsx"
            :http-request="uploadChange"
            :before-upload="beforeAvatarUpload"
            :limit="1"
        >
          <el-button type="primary">{{ $t("导入") }}</el-button>
        </el-upload>
        <el-button @click="downLoanModel" type="primary">{{
            $t("下载数据模版")
          }}
        </el-button>
      </div>
      <!--表单数据-->
      <Table
          row-key="id"
          :table-data="tableData"
          :page="page"
          :tableColumn="tableColumn"
          :loading="loading"
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
      >
        <!--数据来源-->
        <template slot-scope="scope" slot="type">
          <!--1业务拉黑，2导入，3灰转黑-->
          <label>{{ getDataType(scope.row.type) }}</label>
        </template>
        <template slot-scope="{ row }" slot="progress">
          <!--1业务拉黑，2导入，3灰转黑-->
          {{ row.stage === 1 ? $t("审核") : row.stage === 0 ? $t("催收") : "" }}
        </template>
        <!--所属租户-->
        <el-table-column
            v-if="$permiss[450]"
            :label="$t('所属租户')"
            align="center"
            prop="adminUserName"
        ></el-table-column>
      </Table>
    </el-card>
  </div>
</template>

<script>
import {dateFormatSection, defaultTimeDate} from "@/utils/tools";
import {selectTenant} from "@/api/system";
import {fetchBlacklist, importBlacklist} from '@/api/user'

export default {
  name: "blackList",
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        card: "",
        name: "",
        phone: "",
        timeValue: defaultTimeDate(30),
      },
      loading: false,
      tenantList: [], //租户列表
      tableData: [],
      tableColumn: [
        {label: this.$t("姓名"), prop: "name", align: "center"},
        {label: this.$t("手机号码"), prop: "phone", align: "center", minWidth: "150"},
        {label: this.$t("身份证号码"), prop: "card", align: "center"},
        {label: this.$t("银行账号"), prop: "bankAccount", align: "center"},
        {label: this.$t("设备ID"), prop: "equipmentId", align: "center"},
        {label: this.$t("操作人"), prop: "inputName", align: "center"},
        {
          label: this.$t("加入时间"),
          prop: "inputTime",
          align: "center",
          width: "150",
        },
        {
          label: this.$t("数据来源"),
          slot: "type",
          align: "center",
          width: "150",
        },
        {
          label: this.$t("拉黑阶段"),
          align: "center",
          slot: "progress",
          width: "150",
        },
        {
          label: this.$t("拉黑原因"),
          align: "center",
          prop: "cause",
          width: "150",
        },
        {
          label: this.$t("备注"),
          align: "center",
          width: 200,
          prop: "joinCause",
        },
      ],
    };
  },
  mounted() {
    //获取黑名单列表
    this.getTableData();
    //获取租户列表
    selectTenant().then(res => {
      this.tenantList = res.data
    });
  },
  methods: {
    //获取租户列表
    // async getTenantList() {
    //   const res = await this.$get('system/queryTenant');
    //   if (res.code === 1) {
    //     this.tenantList = res.data
    //   }
    // },
    //获取黑名单列表
    async getTableData() {
      const timeValue = dateFormatSection(this.page.timeValue);
      const params = Object.assign({}, this.page, {
        datetimeStart:
            timeValue && timeValue.length >= 1 ? timeValue[0] : undefined,
        datetimeEnd:
            timeValue && timeValue.length >= 1 ? timeValue[1] : undefined,
      });
      delete params.timeValue;
      this.loading = true
      const res = await fetchBlacklist(params);
      if (res.code === 1) {
        const {list, total} = res.data;
        this.tableData = list;
        this.page = Object.assign({}, this.page, {
          total: total,
        });
        this.loading = false
      } else {
        this.loading = false
      }
    },
    //获取数据来源(1业务拉黑，2导入，3灰转黑)
    getDataType(type) {
      var str = "";
      if (type === undefined || type === 0) {
        return str;
      }
      switch (type) {
        case 1:
          str = this.$t("业务拉黑");
          break;
        case 2:
          str = this.$t("导入");
          break;
        case 3:
          str = this.$t("灰转黑");
          break;
      }
      return str;
    },
    //重置
    resetData() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      };
      this.getTableData();
    },
    //下载模版
    downLoanModel() {
      //白名单模版链接
      //http://yundun.diandianhuikj.com/whitelist_stencil.xlsx
      //黑名单链接
      //http://yundun.diandianhuikj.com/blacklistMode.xlsx
      let eleLink = document.createElement("a");
      eleLink.download = "";
      eleLink.href =
          "https://ddhkapps.oss-cn-hongkong.aliyuncs.com/yundun_template/blacklistMode.xlsx";
      eleLink.click();
      eleLink.remove();
    },
    //上传前
    beforeAvatarUpload(file) {
      const isFormat = ".xls||.xlsx";
      //获取最后一个.的位置
      const fileLastPostfix = file.name.lastIndexOf(".");
      //截取后缀名
      const fileNewName = file.name.substring(
          fileLastPostfix,
          file.name.length
      );
      //是否包含
      let isContains = isFormat.indexOf(fileNewName);
      // console.log("是否包含： " + isFormat.indexOf(fileNewName) > -1);
      if (isContains === -1) {
        this.$message.error(this.$t("文件格式不正确!"));
      }
      return isContains !== -1;
    },
    //自定义上传
    async uploadChange(data) {
      const formData = new FormData();
      formData.append("file", data.file);
      const res = await importBlacklist(formData);
      if (res.code === 1) {
        this.$message.success(this.$t("上传成功"));
        this.getTableData();
      }
      this.$refs.upload.clearFiles();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getTableData();
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getTableData();
    },
  },
};
</script>

<style lang="less" scoped>
.upButtonBg {
  display: flex;
  text-align: right;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 10px;
}
</style>
